<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery_files/jquery.js"></script>
		<style>
			.ci_style {
				color: #F10180;
				background: #39435C;
			}
		</style>
	</head>

	<body>
		<div id="result">汽车</div>
		<div id="ci" class="ci_style" style="border: 5px solid #FF0000;">电影</div>


		<hr>
		<button id="addDom">新增DOM</button>
		<button id="delDom">删除DOM</button>

	


<script>
	//2 dom操作
	//新增DOM
	//回调函数  function(){}

	$("#ci").click(function() {
		//$(this).remove();
		//var _this=this				
		//$("#ci").remove();	

		//css
		//1
		//$(this).css("color","#fff").css("background","#000");

		//2
		//$(this).css({"color":"red","background":"black"});

		//3 
		//$(this).addClass("ci_style");
		//$(this).removeClass("ci_style");

		//获取属性
		/*var myAttr = $(this).attr("style");		
		console.log(myAttr)*/
		
		//设置属性
		$(this).attr("stud_id","s0001");
		
		
		
		
	});

	$("#addDom").click(function() {
		/*var news = ["news1", "news2", "news3", "news4"];
		var htmls = "";

		//遍历数据项
		for(var i = 0; i < news.length; i++) {
			htmls += "<li>" + news[i] + "</li>";
		}
		htmls = "<ul>" + htmls + "</ul>";*/

		$("#result").append("<div style='background: red;height: 20px;'></div>");

		$("#result").before("<div style='background: red;height: 20px;'></div>");
	});
</script></body></html>